import {Base} from'../../utils/base.js';
var base =new Base();
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
      //请求后端API生成小程序码
      wx.showLoading({
        title: '加载中……',
      })
    this.getWxCode((res) => {
      var res_data=res.data;
      wx.getImageInfo({
        src: res_data.request,//服务器返回的带参数的小程序码地址
        success: function (res) {
          console.log(res)
          //res.path是网络图片的本地地址
          let qrCodePath = res.path;
          that.setData({
            username: res_data.data.username,
            localImageUrl: qrCodePath
          })
          wx.hideLoading()
          // canvas绘制文字和图片
          that.setCanvas()
        },
        fail: function (res) {
          //失败回调
        }
      });
    });


      
      
  },
  // 画出图片
  setCanvas(){
    const ctx = wx.createCanvasContext('myCanvas');
    var imgPath = '../../images/header-bg.jpg';
    var username = '我是' + this.data.username;
    var xcxcode = this.data.localImageUrl;
    //填充背景
    ctx.setFillStyle('#eeeeee');
    ctx.fillRect(0, 0, 290, 420);
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(1, 1, 288, 418);

    //绘制产品图
    ctx.drawImage(imgPath, 2, 2, 286, 82);
    ctx.drawImage(xcxcode, 73, 120, 140, 140);

    //绘制标题
    ctx.setFontSize(14);
    ctx.setFillStyle('#000');
    ctx.setTextAlign('center')
    ctx.fillText(username, 143, 300);

    //绘制介绍产品
    ctx.setFontSize(24);
    ctx.setFillStyle('#c80212');
    ctx.fillText('我为艾族代言', 143, 335);

    //底部
    ctx.setFillStyle('#eee')
    ctx.fillRect(2, 378, 286, 40)


    //绘制介绍
    ctx.setFontSize(12);
    ctx.setFillStyle('#555');
    ctx.fillText('长按扫码查看详情', 143, 396);
    ctx.fillText('分享自艾族小程序', 143, 410);
    ctx.draw();
  },
  
  // 获取小程序码
  getWxCode(callback){
    base.request({
      'url':'/wx_code',
      success:function(res){
        callback(res)
      },
      fail:function(res){

      }
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '艾一次·享一生-艾族',  // 转发标题（默认：当前小程序名称）
      path: '/pages/index/index', // 转发路径（当前页面 path ），必须是以 / 开头的完整路径
      success(e) {
        console.log(e)
      },
      fail(e) {

      }
    }
  },
  savetup: function () {
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 580,
      height: 840,
      destWidth: 580,
      destHeight: 840,
      canvasId: 'myCanvas',
      success: function (res) {
        //调取小程序当中获取图片
        console.log(res.tempFilePath);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: '存图成功',
              content: '图片成功保存到相册了，去发圈噻~',
              showCancel: false,
              confirmText: '好哒',
              confirmColor: '#c80212',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
})